<template>
  <div class="three-step-container">
    <el-steps :active="activeStep" finish-status="success" :simple="true">
      <el-step title="生成视频" description="" />
      <el-step title="视频发布" description="" />
    </el-steps>

    <div class="step-content">
      <div v-if="activeStep === 0" class="step-one">
        <div class="left-content">
          <div class="area-container center-area">
            <div class="center-content">
              <!-- 输入条件是选择图片和输入prompt -->
              <div class="img-con">
                <div class="img-sec">
                  <div class="section-title">选择视频素材</div>
                  <div class="upload-img" @click="chooseImgMaterial">
                    <el-icon size="24" v-if="!formData.image_url">
                      <Plus />
                    </el-icon>
                    <img v-if="formData.image_url" :src="formData.image_url"
                         style="width: 100%; height: 100%;">
                  </div>
                </div>
                <div class="param-sec">
                  <div class="section-title">生成模式</div>
                  <el-select v-model="formData.req_key" placeholder="请选择生成模式" popper-class="resolution-select">
                    <el-option v-for="item in reqKeyOptions" :key="item.value"
                               :label="item.label" :value="item.value" />
                  </el-select>
                  <div class="section-title">选择音频素材</div>
                  <div class="upload-audio" @click="chooseAudioMaterial">
                    <el-icon size="24" v-if="!formData.pure_audio_url">
                      <Plus />
                    </el-icon>
                    <audio controls v-if="formData.pure_audio_url">
                      <source :src="computedAudioUrl" type="audio/mpeg">
                    </audio>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-content">
          <h4>说明</h4>
          <p>图生视频模型，让静态图像变为动态视频。具备强大的指令遵循能力，支持大幅度复杂运动、现实物理规律还原，生成的视频呈现丰富的艺术风格及影视级画面质感。</p>
          <br>
          <h4>生成耗时</h4>
          <p>图生视频耗时较长，turbo模型大约需要3-5分钟，plus模型则需7-10分钟。实际耗时取决于排队任务数量和网络状况，请您在获取结果时耐心等待。</p>
          <br>
          <h4>描述部分</h4>
          <p>
            输入文本提示词。支持中英文，长度不超过800个字符，每个汉字/字母占一个字符，超过部分会自动截断。示例值：一只小猫在草地上奔跑。
          </p>
        </div>
      </div>

      <div v-if="activeStep === 1" class="step-two">
        <!-- 内容展示区域 -->
        <el-row :gutter="20">
          <!-- 只有一个视频时 -->
          <el-col v-if="resultVideo.length === 1" :span="24" style="">
            <!-- <video :src="resultVideo[0].url" class="single-video" /> -->
            <div class="single-video">
              <DouyinShow :item="resultVideo[0]" />
            </div>
          </el-col>

          <!-- 有两个视频时 -->
          <template v-else-if="resultVideo.length === 2">
            <el-col v-for="(video, index) in resultVideo" :key="index" :span="12">
              <div class="double-video">
                <DouyinShow :item="video" v-if="video" />
              </div>
            </el-col>
          </template>

          <!-- 三个及以上视频时 -->
          <template v-else>
            <el-col v-for="(video, index) in resultVideo" :key="index" :span="8" class="multi-video">
              <div class="multi-video">
                <DouyinShow :item="video" v-if="video" />
              </div>
            </el-col>
          </template>
        </el-row>
      </div>
    </div>

    <div class="step-buttons">
      <div class="generate-row">
        <div class="control-item">
          <span class="control-label">生成数量</span>
          <el-input-number v-model="formData.create_num" :min="1" :max="20" disabled/>
        </div>
        <div class="control-item">
          <span class="control-label">视频时长</span>
          <el-input-number v-model="formData.duration" :min="3" :max="12" />
        </div>
        <div class="control-item">
          <span class="control-label">人声分离</span>
          <el-switch v-model="formData.separate_vocal" />
        </div>
      </div>
      <div>
        <el-button v-if="activeStep == 0" type="primary" @click="handleGenerate">生成视频</el-button>
        <el-button v-if="activeStep == 1" type="default" @click="back">返回</el-button>
        <el-button v-if="activeStep == 1" type="primary" @click="handlePublish">授权发布</el-button>
      </div>
    </div>
  </div>
  <MyDialog v-model="showChooseImgDialog" title="选择视频素材" width="75%">
    <!-- 这里可以传入任何自定义内容 -->
    <SourceVideoNew :multiple="false" ref="sourcePictureNewRef1" @confirm="imgMaterialChoosed"/>
    <!-- 自定义底部 -->
    <template #footer>
      <el-button @click="showChooseImgDialog = false">取消</el-button>
      <el-button type="primary" @click="imgMaterialChoosed">确定</el-button>
    </template>
  </MyDialog>
  <CustomLoading :loading="isLoading" :texts="loadingTexts" :icon-size="40" />

  <!-- 发布设置弹窗 -->
  <MyDialog
      v-model="showPublishDialog"
      title="发布设置"
      width="600px"
      :modal="true"
      :close-on-click-modal="false"
      @confirm="handlePublishConfirm"
      @cancel="handlePublishCancel"
  >
    <div class="publish-form">
      <!-- 发布类型 -->
      <div class="form-section">
        <div class="section-label">发布类型</div>
        <div class="publish-type-buttons">
          <button
              :class="['type-btn', publishForm.publishType === 'douyin' ? 'active' : '']"
              @click="publishForm.publishType = 'douyin'"
          >
            抖音发布
          </button>
          <!--            <button
                        :class="['type-btn', publishForm.publishType === 'xiaohongshu' ? 'active' : '']"
                        @click="publishForm.publishType = 'xiaohongshu'"
                      >
                        小红书发布
                      </button>-->
        </div>
      </div>

      <!-- 活动名称 -->
      <div class="form-section">
        <div class="section-label">活动名称</div>
        <el-input
            v-model="publishForm.activityName"
            placeholder="请输入活动名称"
            class="form-input"
        />
      </div>

      <!-- 标题 -->
      <div class="form-section">
        <div class="section-label">标题</div>
        <el-input
            v-model="publishForm.title"
            type="textarea"
            :rows="2"
            placeholder="发布时标题会自动携带(数字人请手动录入)"
            class="form-input"
        />
      </div>

      <!-- 话题 -->
      <div class="form-section">
        <div class="section-label">话题</div>
        <el-input-tag
            v-model="publishForm.topic"
            placeholder="请输入话题，按回车添加"
            class="form-input"
        />
        <div class="form-tip">
          <el-icon><InfoFilled /></el-icon>
          一行代表一个话题
        </div>
      </div>

      <!-- 挂载 -->
      <div class="form-section" v-if="publishForm.publishType === 'douyin'">
        <div class="section-label">挂载</div>
        <div class="mount-buttons">
          <button
              :class="['mount-btn', publishForm.mount === 'none' ? 'active' : '']"
              @click="publishForm.mount = 'none'"
          >
            无
          </button>
          <button
              :class="['mount-btn', publishForm.mount === 'poi' ? 'active' : '']"
              @click="publishForm.mount = 'poi'"
          >
            POI地址/团购
          </button>
          <button
              :class="['mount-btn', publishForm.mount === 'miniprogram' ? 'active' : '']"
              @click="publishForm.mount = 'miniprogram'"
          >
            小程序
          </button>
        </div>
      </div>
      <!-- POI -->
      <div class="form-section" v-if="publishForm.publishType === 'douyin' && publishForm.mount === 'poi'">
        <div class="section-label">挂载内容</div>
        <div style="display: flex; gap: 8px; width: 100%;">
          <el-input v-model="publishForm.poi1" placeholder="请输入关键词" style="flex:1;" />
          <el-input v-model="publishForm.poi2" placeholder="请输入城市" style="flex:1;" />
          <el-button icon="el-icon-search" type="primary" @click="handleChooseCityKeyWord">搜索</el-button>
        </div>
        <div style="margin-top: 8px;">
          <el-select v-model="publishForm.poiSelect" placeholder="请选择" style="width: 100%;">
            <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </div>
      <!-- 小程序 -->
      <div class="form-section" v-if="publishForm.publishType === 'douyin' && publishForm.mount === 'miniprogram'">
        <div class="section-label">挂载内容</div>
        <el-input v-model="publishForm.miniId" placeholder="例如：ttef91b112671b152ba ID" style="margin-bottom: 8px;" />
        <el-input v-model="publishForm.miniTitle" placeholder="请输入小程序标题" style="margin-bottom: 8px;" />
        <el-input v-model="publishForm.miniPath" placeholder="例如：path/pages/index" />
      </div>
      <!-- 数据获取 -->
      <!-- <div class="form-section" v-if="publishForm.publishType === 'douyin'">
        <div class="section-label">数据获取</div>
        <div class="data-acquisition-row">
          <el-switch
            v-model="publishForm.dataAcquisition"
            active-color="#409EFF"
          />
          <div class="form-tip">
            <el-icon><InfoFilled /></el-icon>
            打开数据获取后,需要用户确定授权
          </div>
        </div>
      </div> -->

      <!-- 随机图片数量 -->
      <div class="form-section">
        <div class="section-label">随机图片数量</div>
        <el-input-number
            v-model="publishForm.picnums"
            :min="0"
            :max="9999"
            class="scan-limit-input"
        />
      </div>

      <!-- 扫码数量限制 -->
      <div class="form-section">
        <div class="section-label">扫码数量限制</div>
        <el-input-number
            v-model="publishForm.scanCodeLimit"
            :min="0"
            :max="9999"
            class="scan-limit-input"
        />
      </div>
    </div>
  </MyDialog>

  <!-- 二维码显示弹窗 -->
  <MyDialog
      v-model="showQrCodeDialog"
      title="请扫码发布"
      width="600px"
      :modal="true"
      :close-on-click-modal="false"
      @confirm="handleQrCodeConfirm"
      @cancel="handleQrCodeConfirm"
  >
    <!-- 二维码显示区域 -->
    <div class="form-section" v-if="douyinQrCode || redBookAndroidQrCode || redBookIOSQrCode">
      <div class="qr-code-container">
        <!-- 抖音二维码 -->
        <div v-if="douyinQrCode" class="qr-code-item">
          <div class="qr-code-title">抖音二维码</div>
          <img :src="douyinQrCode" alt="抖音二维码" class="qr-code-image" />
        </div>
        <!-- 小红书Android二维码 -->
        <div v-if="redBookAndroidQrCode" class="qr-code-item">
          <div class="qr-code-title">小红书Android二维码</div>
          <img :src="redBookAndroidQrCode" alt="小红书Android二维码" class="qr-code-image" />
        </div>
        <!-- 小红书iOS二维码 -->
        <div v-if="redBookIOSQrCode" class="qr-code-item">
          <div class="qr-code-title">小红书iOS二维码</div>
          <img :src="redBookIOSQrCode" alt="小红书iOS二维码" class="qr-code-image" />
        </div>
      </div>
    </div>
  </MyDialog>
  <MyDialog v-model="showChooseAudioDialog" title="选择音频素材" width="75%">
    <!-- 这里可以传入任何自定义内容 -->
    <SourceAudioNew :multiple="false" ref="sourceAudioNewRef1" @confirm="audioMaterialChoosed"/>
    <!-- 自定义底部 -->
    <template #footer>
      <el-button @click="showChooseAudioDialog = false">取消</el-button>
      <el-button type="primary" @click="audioMaterialChoosed">确定</el-button>
    </template>
  </MyDialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import {computed, onMounted, reactive, ref} from 'vue';
import MyDialog from '../../common/MyDialog.vue';
import SourcePictureNew from '../../videoWarehouse/SourcePictureNew.vue';
import SourceVideoNew from "../../videoWarehouse/SourceVideoNew.vue";
import utils from '../../../utils/utils';
import axiosUtil from '../../../axios-util/axios-util';
import CustomLoading from '../../common/CustomLoading.vue';
import DouyinShow from '../DouyinShow.vue';
import { InfoFilled, Plus } from '@element-plus/icons-vue';
import type { PictureContent } from '../../../utils/types';
import QRCode from 'qrcode';
import SourceAudioNew from "../../videoWarehouse/SourceAudioNew.vue";

//主题控制light  dark
const theme = utils.getTheme();

// 对话框状态控制
// 图片素材选择对话框
const showChooseImgDialog = ref(false);
// 视频素材选择对话框
const sourcePictureNewRef1 = ref(null);

// 默认选中720P
// 分辨率选项
const reqKeyOptions = ref([]);
const showChooseAudioDialog = ref(false);

const chooseAudioMaterial = () => {
  showChooseAudioDialog.value = true;
}

const sourceAudioNewRef1 = ref(null);

const computedAudioUrl = computed(() => {
  return (typeof formData.pure_audio_url == 'string') ? formData.pure_audio_url : formData.pure_audio_url.url
})

const audioMaterialChoosed = () => {
  let audioSrc = sourceAudioNewRef1.value.getSelectMateriaAll();
  if (!audioSrc) {
    ElMessage.error('请选择音频');
    return;
  }
  // 回显视频
  formData.pure_audio_url = audioSrc.url;
  // 时长
  formData.duration = audioSrc.duration;
  showChooseAudioDialog.value = false;
}

const initReqKeyOptions = async () => {
  const response = await axiosUtil.get('api/huoshan_open/image2_video/kxth_mode')
  if(response.data.code === 1) {
    const data = response.data.data.mode;
    // 遍历data并给resolutionOptions赋值
    reqKeyOptions.value = data.map(item => ({
      value: item.id || '',
      label: item.name || ''
    }));
  }
}

const ratioOptions = ref([]);

onMounted(() => {
  initReqKeyOptions()
})

// 要提交的数据结构
const formData = reactive<any>({
  // 视频分辨率
  req_key: 'realman_change_lips',
  // 图片素材
  image_url: '',
  // 视频素材
  url: '',
  pure_audio_url: '',
  // 创建视频数量
  create_num: 1,
  // 任务标题
  title: '',
  //时长
  duration: 3,
  separate_vocal:true
})
const resultVideo = ref<PictureContent[]>([]);
// 加载中状态控制
const isLoading = ref<boolean>(false);
const loadingTexts = ref<string[]>([
  '正在为您的照片注入生命力...',
  '魔法进行中，马上就好✨',
  '离开一下也没关系，视频完成后可在成品库查看~',
  '稍等片刻，精彩即将呈现...',
  '系统正在精心制作您的视频...',
  '离开一下也没关系，视频完成后可在成品库查看~'
]);

// 当前步骤
const activeStep = ref(0);

// 发布设置弹窗相关
const showPublishDialog = ref(false)
const publishForm = ref({
  publishType: 'douyin', // douyin 或 xiaohongshu
  activityName: '',
  title: '',
  topic: [], // Changed to array for InputTag
  mount: 'none', // none, poi, miniprogram
  dataAcquisition: false,
  scanCodeLimit: 0,
  picnums: 0,
  // POI相关字段
  poi1: '',
  poi2: '',
  poiSelect: '',
  // 小程序相关字段
  miniId: '',
  miniTitle: '',
  miniPath: ''
})

const cityData = ref([])

// 二维码相关
const showQrCodeDialog = ref(false)
const douyinQrCode = ref("")
const redBookAndroidQrCode = ref("")
const redBookIOSQrCode = ref("")

// 生成二维码的函数
const generateQRCode = async (text: string): Promise<string> => {
  try {
    const qrCodeDataUrl = await QRCode.toDataURL(text, {
      width: 200,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    })
    return qrCodeDataUrl
  } catch (error) {
    console.error('生成二维码失败:', error)
    return ''
  }
}

// 选择图片素材
const chooseImgMaterial = () => {
  showChooseImgDialog.value = true;
}

// 图片素材选择完成处理
const imgMaterialChoosed = () => {
  console.log(sourcePictureNewRef1.value.getSelectMateria())
  let imgUrl = sourcePictureNewRef1.value.getSelectMateria().url_image;
  let url = sourcePictureNewRef1.value.getSelectMateria().url;
  if (imgUrl.length === 0) {
    ElMessage.error('请选择图片');
    return;
  }
  // 回显图片
  formData.image_url = imgUrl;
  formData.url = url;
  showChooseImgDialog.value = false;
}

const handleGenerate = async () => {
  console.log('生成视频', formData);
  if (!formData.url || formData.url.length == 0) {
    ElMessage.error('请选择视频素材');
    return;
  }
  if (!formData.pure_audio_url || formData.pure_audio_url.length == 0) {
    ElMessage.error('请选择音频素材');
    return;
  }
  formData.title = await utils.openTaskTitleBox();
  if (typeof formData.image_url != 'string') {
    formData.image_url = formData.image_url[0];
  }
  isLoading.value = true;
  const response = await axiosUtil.post('api/huoshan_open/image2_video/create_kxth_task', formData);
  if (response.data.code === 1) {
    const id = response.data.data.id;
    let timer = setInterval(() => {
      axiosUtil.post('api/huoshan_open/image2_video/query_itov_task', {
        id: id,
      }).then(responseSon => {
        if (responseSon.data.code !== 1) {
          ElMessage.error('生成视频出错');
          isLoading.value = false;
          return;
        }
        if (responseSon.data.data.all_handle === 2) {
          ElMessage.error('生成视频出错');
          clearInterval(timer);
          isLoading.value = false;
        } else if (responseSon.data.data.all_handle === 1) {
          // 生成成功
          clearInterval(timer);
          // 右侧显示视频
          resultVideo.value = responseSon.data.data.list.map(v => {
            return  {
              id: v.id,
              bg: '',
              avatar: 'https://img2.baidu.com/it/u=2328777830,2201725034&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
              likes: 9999,
              comments: 9999,
              favorites: 9999,
              shares: 9999,
              author: '@智慧AI测试',
              desc: '图生视频',
              url: v.url
            }
          });
          isLoading.value = false;
          // 跳到第二步骤页面
          activeStep.value = 1;
        }
      })
    }, 3000);
  } else {
    ElMessage.error('生成视频出错');
    isLoading.value = false;
  }
}

function back() {
  utils.openConfirmBox('info', '确认返回吗？', '返回后所有填写的内容将丢失', () => {
    activeStep.value = 0;
  });
}

// 发布设置弹窗处理方法
const handlePublishConfirm = async () => {
  console.log('发布设置确认', publishForm.value)
  let videos = ''
  let arr = []
  if(resultVideo.value.length > 0) {
    resultVideo.value.forEach(video => {
      arr.push(video.url)
    })
  }else {
    ElMessage.warning('请先生成视频')
    return
  }
  videos = arr.join(",")

  // TODO: 在这里处理发布逻辑
  let url = ''
  let data: any = {
    "title": publishForm.value.activityName,
    "video_text": publishForm.value.title,
    "video_text_keyword": publishForm.value.topic,
    "platform_type": "none",
    "micro_app_info": {
      "micro_app_id": "",
      "micro_app_title": "",
      "micro_app_url": ""
    },
    "open_data": publishForm.value.dataAcquisition?1:0,
    "video_list": videos,
    "max_release_num": publishForm.value.scanCodeLimit,
    "type": "video",
    "photos": "",
    "photos_num": publishForm.value.picnums,
    "id": ""
  }

  if(publishForm.value.publishType === 'douyin'){
    url = 'api/scan_publish/douyin/save';
    // 处理POI挂载
    if(publishForm.value.mount === 'poi'){
      if(!publishForm.value.poiSelect){
        ElMessage.warning("请先选择数据")
        return
      }else {
        const selectArr = cityData.value.find(item => item.value === publishForm.value.poiSelect)
        if(selectArr){
          data.mount_type = 'poi'
          data.poi_id = selectArr.value
          data.poi_name = selectArr.label
        }
      }
    }

    // 处理小程序挂载
    if(publishForm.value.mount === 'miniprogram'){
      if(!publishForm.value.miniId){
        ElMessage.warning("请先输入小程序ID")
        return
      }
      if(!publishForm.value.miniTitle){
        ElMessage.warning("请先输入标题")
        return
      }
      if(!publishForm.value.miniPath){
        ElMessage.warning("请先输入路径")
        return
      }
      data.mount_type = 'mini_program'
      data.micro_app_info.micro_app_id = publishForm.value.miniId
      data.micro_app_info.micro_app_title = publishForm.value.miniTitle
      data.micro_app_info.micro_app_url = publishForm.value.miniPath
    }
  }else {
    url = 'api/scan_publish/xhs/save'
  }

  try {
    const response = await axiosUtil.post(url, data)
    if(response.data.code === 1) {
      ElMessage.success(response.data.msg)
      const qr_code = response.data.data.qr_code
      if(publishForm.value.publishType === 'douyin'){
        // 将地址转换为二维码图片
        douyinQrCode.value = await generateQRCode(qr_code)
      }else {
        // 将地址转换为二维码图片
        redBookAndroidQrCode.value = await generateQRCode(qr_code.android)
        redBookIOSQrCode.value = await generateQRCode(qr_code.ios)
      }
      showQrCodeDialog.value = true
      showPublishDialog.value = false
    }else {
      ElMessage.error(response.data.msg)
    }
  } catch (error) {
    ElMessage.error('发布失败，请重试')
  }
}

const handlePublishCancel = () => {
  showPublishDialog.value = false
  // 重置表单
  publishForm.value = {
    publishType: 'douyin',
    activityName: '',
    title: '',
    topic: [], // Reset to empty array for InputTag
    mount: 'none',
    dataAcquisition: false,
    scanCodeLimit: 0,
    picnums: 0,
    // POI相关字段
    poi1: '',
    poi2: '',
    poiSelect: '',
    // 小程序相关字段
    miniId: '',
    miniTitle: '',
    miniPath: ''
  }

  // 清空城市数据
  cityData.value = [];
}

const handleQrCodeConfirm = () =>{
  publishForm.value = {
    publishType: 'douyin',
    activityName: '',
    title: '',
    topic: [], // Reset to empty array for InputTag
    mount: 'none',
    dataAcquisition: false,
    scanCodeLimit: 0,
    picnums: 0,
    // POI相关字段
    poi1: '',
    poi2: '',
    poiSelect: '',
    // 小程序相关字段
    miniId: '',
    miniTitle: '',
    miniPath: ''
  }
  douyinQrCode.value = ""
  redBookAndroidQrCode.value = ""
  redBookIOSQrCode.value = ""
  showQrCodeDialog.value = false;

  // 清空城市数据
  cityData.value = [];
}

const handleChooseCityKeyWord = async () => {
  if(!publishForm.value.poi1){
    ElMessage.warning("请输入关键词")
    return
  }
  if(!publishForm.value.poi2){
    ElMessage.warning("请输入城市")
    return
  }
  try {
    const res = await axiosUtil.post('api/scan_publish/douyin/search_poi', {
      "keyword": publishForm.value.poi1,
      "city": publishForm.value.poi2
    })
    if(res.data.code){
      cityData.value = []
      res.data.code.forEach(item=>{
        const son = {
          value: item.poi_id,
          label: item.province  + item.city + item.district + item.address,
        }
        cityData.value.push(son)
      })
    }
  } catch (error) {
    ElMessage.error('搜索POI失败，请重试')
  }
}

// 发布视频事件
const handlePublish = () => {
  console.log('点击授权发布按钮')
  showPublishDialog.value = true
  // 发布前清空之前的二维码数据
  douyinQrCode.value = "";
  redBookAndroidQrCode.value = "";
  redBookIOSQrCode.value = "";
}

</script>

<style scoped>
.resolution-select {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}
.three-step-container {
  height: 100%;
  padding: 20px;
  --el-text-color-primary: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  --el-fill-color-light: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.step-content {
  height: calc(100% - 70px);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}

.step-one,
.step-two {
  height: 100%;
  display: flex;
  gap: 20px;
}

.left-content,
.right-content {
  height: 100%;
  flex: 1;
  font-size: 14px;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}

.left-content img,
.left-content video {
  width: 100%;
  height: auto;
}

.step-buttons {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.area-container {
  height: 100%;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"');
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.2)"');
  box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)"');
  transition: all 0.3s ease;
  padding: 15px;
}

.area-container:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.15)" : "rgba(0, 0, 0, 0.15)"');
  box-shadow: 0 6px 12px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(0, 0, 0, 0.25)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"');
}

.image-section {
  display: flex;
  flex-direction: column;
  height: 180px;
}

.select-section {
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
}

.input-section {
  /* height: 100%; */
  flex: 1;
  display: flex;
  flex-direction: column;
}

.section-title {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  font-size: 14px;
  font-weight: 500;
}

.section-title span {
  font-size: 12px;
  color: #d5d5d5;
}

.upload-img {
  min-height: 0; /* 关键！允许缩小到0 */
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1;
  box-shadow: var(--el-box-shadow-dark);
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
}

.description-input {
  flex: 1;
  min-height: 0;
  width: 100%;
  background-color: transparent;
  /* background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"'); */
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  border-radius: 4px;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  padding: 10px;
  resize: none;
  font-size: 14px;
  line-height: 1.5;
}

.description-input:focus {
  outline: none;
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(255, 255, 255, 0.4)"');
  box-shadow: 0 0 10px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.2)"');
}

.description-input::placeholder {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}

.center-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 20px;
}

.img-con {
  display: flex;
  flex-direction: row;
  gap: 15px;
  height: 100%;
}

.img-con .img-sec {
  width: 45%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.img-con .param-sec {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 55%;
  height: 100%;
}

.generate-row {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
  align-items: center;
}

.control-item {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

.control-label {
  font-size: 12px;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.6)" : "rgba(255, 255, 255, 0.6)"');
  font-weight: 500;
  white-space: nowrap;
  min-width: fit-content;
}

.count-input {
  width: 120px;
}

.count-input :deep(.el-input-number__decrease),
.count-input :deep(.el-input-number__increase) {
  background: v-bind('theme === "light" ? "rgba(0, 102, 204, 0.4)" : "rgba(0, 102, 204, 0.5)"');
  border-color: v-bind('theme === "light" ? "rgba(0, 204, 255, 0.3)" : "rgba(0, 204, 255, 0.4)"');
  color: #fff;
}

.count-input :deep(.el-input-number__decrease:hover),
.count-input :deep(.el-input-number__increase:hover) {
  background: v-bind('theme === "light" ? "rgba(0, 102, 204, 0.6)" : "rgba(0, 102, 204, 0.7)"');
  border-color: v-bind('theme === "light" ? "rgba(0, 204, 255, 0.5)" : "rgba(0, 204, 255, 0.6)"');
}

.count-input :deep(.el-input__wrapper) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  box-shadow: 0 0 0 1px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.3)"');
}

.count-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.5)"');
}

.count-input :deep(.el-input__inner) {
  color: #fff;
}

.single-video {
  width: 100%;
  height: 100%;
  padding: 10px;
  /* 单个视频时的高度 */
}

.double-video {
  width: 100%;
  height: 300px;
  /* 两个视频时的高度 */
}

.multi-video {
  margin-bottom: 20px;
}

:deep(.el-select__placeholder) {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}

/* 响应式调整 */
@media (max-width: 992px) {
  .el-col {

    /* 在小屏幕上，大于2个视频时每行显示2个 */
    &:nth-child(n+3) {
      margin-top: 20px;
    }
  }
}

@media (max-width: 768px) {
  .el-col {
    /* 在更小的屏幕上，所有情况都单列显示 */
    width: 100% !important;
    margin-bottom: 20px;
  }
}

/* 发布设置弹窗样式 */
.publish-form {
  padding: 20px;
}

.form-section {
  margin-bottom: 24px;
}

.section-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.publish-type-buttons {
  display: flex;
  gap: 12px;
}

.type-btn {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #606266;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.type-btn:hover {
  border-color: #409eff;
  color: #409eff;
}

.type-btn.active {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}

.form-input {
  width: 100%;
}

.form-tip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.mount-buttons {
  display: flex;
  gap: 12px;
}

.mount-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #606266;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 12px;
}

.mount-btn:hover {
  border-color: #409eff;
  color: #409eff;
}

.mount-btn.active {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}

.data-acquisition-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scan-limit-input {
  width: 120px;
}

/* 二维码显示样式 */
.qr-code-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;
}

.qr-code-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.qr-code-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: center;
}

.qr-code-image {
  width: 150px;
  height: 150px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.upload-audio {
  min-height: 0;
  /* 关键！允许缩小到0 */
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1;
  padding: 0 10px;
  box-shadow: var(--el-box-shadow-dark);
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
}
</style>
